<!--
  ~ Copyright 2016 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div class="editable" data-field="container">
    <div data-field="html-editor-toolbar">
        <!-- toolbar -->
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="bold-action" data-wysihtml-command="bold" unselectable="on"><i class="fa fa-bold" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="italic-action" data-wysihtml-command="italic" unselectable="on"><i class="fa fa-italic" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="underline-action" data-wysihtml-command="underline" unselectable="on"><i class="fa fa-underline" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="create-link-action" data-wysihtml-command="createLink" unselectable="on"><i class="fa fa-link" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="remove-link-action" data-wysihtml-command="removeLink" unselectable="on"><i class="fa fa-chain-broken" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="insert-image-action" data-wysihtml-command="insertImage" unselectable="on"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="insert-table-action" data-wysihtml-command="createTable" unselectable="on" class=""><i class="fa fa-table" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="big-title-action" data-wysihtml-command="formatBlock" data-wysihtml-command-value="h1" unselectable="on"><b>h1</b></button>
                <button type="button" class="btn btn-default" data-field="medium-title-action" data-wysihtml-command="formatBlock" data-wysihtml-command-value="h2" unselectable="on"><b>h2</b></button>
                <button type="button" class="btn btn-default" data-field="small-title-action" data-wysihtml-command="formatBlock" data-wysihtml-command-value="h3" unselectable="on"><b>h3</b></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="paragraph-action" data-wysihtml-command="formatBlock" data-wysihtml-command-value="p" unselectable="on"><i class="fa fa-paragraph" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="pre-action" data-wysihtml-command="formatBlock" data-wysihtml-command-value="pre" unselectable="on"><i class="fa fa-file-code-o" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="plain-text-action" data-wysihtml-command="formatBlock" data-wysihtml-command-blank-value="true" unselectable="on" class="wysihtml-command-active"><i class="fa fa-bars" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="quote-action" data-wysihtml-command="insertBlockQuote" unselectable="on"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="code-action" data-wysihtml-command="formatCode" data-wysihtml-command-value="language-html" unselectable="on"><i class="fa fa-code" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-field="font-size-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-text-height" aria-hidden="true"></i><span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-xx-small"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="xx-small" unselectable="on"
                               data-field="font-size-action-xx-small" data-i18n-key="xx-small"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-x-small"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="x-small" unselectable="on"
                               data-field="font-size-action-x-small" data-i18n-key="x-small"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-small"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="small" unselectable="on"
                               data-field="font-size-action-small" data-i18n-key="small"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-medium"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="medium" unselectable="on"
                               data-field="font-size-action-medium" data-i18n-key="medium" ></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-large"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="large" unselectable="on"
                               data-field="font-size-action-large" data-i18n-key="large"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-x-large"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="x-large" unselectable="on"
                               data-field="font-size-action-x-large" data-i18n-key="x-large"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="wysiwyg-font-size-xx-large"
                               data-wysihtml-command="fontSizeStyle" data-wysihtml-command-value="xx-large" unselectable="on"
                               data-field="font-size-action-xx-large" data-i18n-key="xx-large"></a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default" data-field="font-color-action" data-wysihtml-command="foreColorStyle" unselectable="on"><i class="fa fa-font" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="background-color-action" data-wysihtml-command="bgColorStyle" unselectable="on"><i class="fa fa-pencil-square" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="unordered-list-action" data-wysihtml-command="insertUnorderedList" unselectable="on"><i class="fa fa-list-ul" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="ordered-list-action" data-wysihtml-command="insertOrderedList" unselectable="on"><i class="fa fa-list-ol" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="outdent-list-action" data-wysihtml-command="outdentList" unselectable="on"><i class="fa fa-outdent" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="indent-list-action" data-wysihtml-command="indentList" unselectable="on"><i class="fa fa-indent" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="align-left-action" data-wysihtml-command="alignLeftStyle" unselectable="on"><i class="fa fa-align-left" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="align-right-action" data-wysihtml-command="alignRightStyle" unselectable="on"><i class="fa fa-align-right" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="align-center-action"data-wysihtml-command="alignCenterStyle" unselectable="on"><i class="fa fa-align-center" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="undo-action" data-wysihtml-command="undo" unselectable="on"><i class="fa fa-undo" aria-hidden="true"></i></button>
                <button type="button" class="btn btn-default" data-field="redo-action" data-wysihtml-command="redo" unselectable="on"><i class="fa fa-repeat" aria-hidden="true"></i></button>
            </div>

            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" data-field="switch-to-html-action" data-wysihtml-action="change_view" unselectable="on" data-i18n-key="SwitchView"></button>
            </div>
        </div>
        <!-- toolbar actions -->
        <div>
            <div class="panel panel-default" data-wysihtml-hiddentools="table" style="display: none;">
                <div class="panel-body">
                    <label data-i18n-key="TableOptions"></label>
                    <a data-wysihtml-command="mergeTableCells" href="javascript:;" unselectable="on" data-i18n-key="TableMergeCells"></a>,
                    <a data-wysihtml-command="addTableCells" data-wysihtml-command-value="above" href="javascript:;" unselectable="on" data-i18n-key="TableAddRowBefore"></a>,
                    <a data-wysihtml-command="addTableCells" data-wysihtml-command-value="below" href="javascript:;" unselectable="on" data-i18n-key="TableAddRowAfter"></a>,
                    <a data-wysihtml-command="addTableCells" data-wysihtml-command-value="before" href="javascript:;" unselectable="on" data-i18n-key="TableAddColumnBefore"></a>,
                    <a data-wysihtml-command="addTableCells" data-wysihtml-command-value="after" href="javascript:;" unselectable="on" data-i18n-key="TableAddColumnAfter"></a>,
                    <a data-wysihtml-command="deleteTableCells" data-wysihtml-command-value="row" href="javascript:;" unselectable="on" data-i18n-key="TableRemoveRow"></a>,
                    <a data-wysihtml-command="deleteTableCells" data-wysihtml-command-value="column" href="javascript:;" unselectable="on" data-i18n-key="TableRemoveColumn"></a>
                </div>
            </div>

            <div class="panel panel-default" data-wysihtml-dialog="bgColorStyle" style="display: none;">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="background-color-input" data-i18n-key="BackgroundColorDialog"></label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-field="background-color-button">
                                    <i class="fa fa-edit"></i>
                                </button>
                            </span>
                            <input type="text" class="form-control" data-field="background-color-input" id="background-color-input" data-wysihtml-dialog-field="color" readOnly>
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-wysihtml-dialog-action="save" data-i18n-key="Ok"></button>
                        <button type="button" class="btn btn-default" data-wysihtml-dialog-action="cancel" data-i18n-key="Cancel"></button>
                    </div>
                </div>
            </div>

            <div class="panel panel-default" data-wysihtml-dialog="foreColorStyle" style="display: none;">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="background-color-input" data-i18n-key="FontColorDialog"></label>
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" data-field="font-color-button">
                                    <i class="fa fa-edit"></i>
                                </button>
                            </span>
                            <input type="text" class="form-control" data-field="font-color-input" id="font-color-input" data-wysihtml-dialog-field="color" readOnly>
                        </div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-wysihtml-dialog-action="save" data-i18n-key="Ok"></button>
                        <button type="button" class="btn btn-default" data-wysihtml-dialog-action="cancel" data-i18n-key="Cancel"></button>
                    </div>
                </div>
            </div>

            <div class="panel panel-default" data-wysihtml-dialog="createLink" style="display: none;">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="link-input" data-i18n-key="LinkDialog"></label>
                        <input type="text" class="form-control" id="link-input" data-wysihtml-dialog-field="href" placeholder="http://www.exampleURL.com">
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-wysihtml-dialog-action="save" data-i18n-key="Ok"></button>
                        <button type="button" class="btn btn-default" data-wysihtml-dialog-action="cancel" data-i18n-key="Cancel"></button>
                    </div>
                </div>
            </div>

            <div class="panel panel-default" data-wysihtml-dialog="insertImage" style="display: none;">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="imageSrc" data-i18n-key="ImageDialog"></label>
                        <input type="text" class="form-control" id="imageSrc" data-wysihtml-dialog-field="src" placeholder="http://exampleURL.com/exampleImage.jpg">
                    </div>
                    <div class="form-group">
                        <label for="imageAlignment" data-i18n-key="ImageAlignment"></label>
                        <select class="form-control" id="imageAlignment" data-wysihtml-dialog-field="className">
                            <option value="" data-i18n-key="ImageAlignmentDefault"></option>
                            <option value="wysiwyg-float-left" data-i18n-key="ImageAlignmentLeft"></option>
                            <option value="wysiwyg-float-right" data-i18n-key="ImageAlignmentRight"></option>
                        </select>
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-wysihtml-dialog-action="save" data-i18n-key="Ok"></button>
                        <button type="button" class="btn btn-default" data-wysihtml-dialog-action="cancel" data-i18n-key="Cancel"></button>
                    </div>
                </div>
            </div>

            <div class="panel panel-default" data-wysihtml-dialog="createTable" style="display: none;">
                <div class="panel-body">
                    <div class="form-group">
                        <label for="tableRows" data-i18n-key="TableRows"></label>
                        <input type="text" class="form-control" id="tableRows" data-wysihtml-dialog-field="rows">
                    </div>
                    <div class="form-group">
                        <label for="tableColumns" data-i18n-key="TableColumns"></label>
                        <input type="text" class="form-control" id="tableColumns" data-wysihtml-dialog-field="cols">
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary" data-wysihtml-dialog-action="save" data-i18n-key="Ok"></button>
                        <button type="button" class="btn btn-default" data-wysihtml-dialog-action="cancel" data-i18n-key="Cancel"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- canvas -->
    <div data-field="html-editor" class="wysihtml-sandbox wysihtml-editor" contenteditable="true">
    </div>
</div>
